<template>
    <view class="return-order-item" @click="goOrderDetail">
        <view class="header">
            <view class="has-good" :class="{ hasNot: !data.OrderId > 0 }"> </view>
            <view class="status">
                <text :class="{ examine: data.State == 0, success: data.State == 1, reject: data.State == 2 }">{{
                    data.StateName
                }}</text>
            </view>
        </view>
        <view class="order-info">
            <view class="order-number">
                <text>退款单号：{{ data.En }}</text>
            </view>
            <view class="order-info-other">
                <view class="other-item">
                    <iconsfont customIcons="icon-shuliang"></iconsfont>
                    <text>数量：{{ data.ClassNumber }}种{{ data.TotalNumber }}件</text>
                </view>
                <view class="other-item">
                    <iconsfont customIcons="icon-jine"></iconsfont>
                    <text>金额：¥{{ data.OrgPriceSum }}</text>
                </view>
            </view>
        </view>
        <view class="order-time">
            <view class="time">
                <iconsfont customIcons="icon-shijian"></iconsfont>
                <text>{{ data.AddTime }}</text>
            </view>
            <uni-icons type="arrowright"></uni-icons>
        </view>
    </view>
</template>

<script>
export default {
    props: ["data"],
    data() {
        return {}
    },
    methods: {
        getStatusText() {
            //获取状态文字
            let text = ""
            switch (this.data.State) {
                case 0:
                    text = "待审核"
                    break
                case 1:
                    text = "待退款"
                    break
                case 2:
                    text = "已取消"
                    break
                case 3:
                    text = "退款中"
                    break
                case 8:
                    text = "已驳回"
                    break
                case 9:
                    text = "已退款"
                    break
                default:
                    text = "待审核"
                    break
            }
            return text
        },
        goOrderDetail() {
            this.easyGoTo("/pages_shop/packet/refund/detail?id=" + this.data.ID)
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";

.return-order-item {
    display: flex;
    flex-direction: column;
    padding: 15rpx $app-page-padding 0;
    background: $color-white;
    border-radius: $border-radius-10;
    margin: $app-page-padding;
}

.header {
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;
    .status {
    }

    .has-good {
        position: relative;
        display: flex;
        flex: 1;
        height: 50rpx;
        perspective: 1000;
        .title {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-left: 10rpx;
            margin-top: 10rpx;

            .icon {
                margin-right: 6rpx;
            }

            .text {
                color: $color-white;
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            width: 170rpx;
            height: 48rpx;
            /* 宽高 */
            background-color: $app-color-main;
            /* 颜色 */
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            /* 设置圆角 */
            transform: perspective(16rpx) rotateX(2deg);
            /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
            transform-origin: bottom left;
            /* bottom left = left bottom = 0 100% 中心点偏移量*/
        }
    }

    .hasNot {
        .bg {
            background-color: $color-yellow-1;
        }
    }
}
.order-info {
    background: $color-gray-5;
    padding: $app-page-padding;
    .order-number {
        margin-bottom: 35rpx;
        text {
            color: $color-black;
            font-size: $font-size-30;
        }
    }
    .order-info-other {
        display: flex;
        flex-direction: row;
        .other-item {
            display: flex;
            flex: 1;
            align-items: center;
            text {
                margin-left: 6rpx;
            }
        }
    }
}
.order-time {
    display: flex;
    flex-direction: row;
    height: 88rpx;
    align-items: center;
    .time {
        display: flex;
        flex: 1;
        align-items: center;
        text {
            margin-left: 6rpx;
        }
    }
}
</style>
